import React, { Component } from 'react'
import propTypes from 'prop-types'

export class MainBanner extends Component {
  // es2022：最新写法
  static defaultProps = {
    banners: [1, 2, 3],
    title: '默认标题',
  }
  constructor(props) {
    // 内部会自动保持props在实例对象上
    super(props)
    this.state = {}
  }

  render() {
    const { banners, title } = this.props

    return (
      <div>
        <h2>{title}</h2>
        <ul>
          {banners.map((banner, index) => (
            <li key={index}>{banner}</li>
          ))}
        </ul>
      </div>
    )
  }
}

// 定义传入额props的类型
MainBanner.propTypes = {
  banners: propTypes.array,
  title: propTypes.string,
}

// 默认值
// MainBanner.defaultProps = {
//   banners: [1, 2, 3],
//   title: '默认标题',
// }

export default MainBanner
